import { useEffect, useState } from 'react';

function Demo() {
    const [isScreenH, setIsScreenH] = useState(false);
    
    useEffect(() => {
        function orientation() {
            const orientation = (window.innerWidth > window.innerHeight);
            setIsScreenH(orientation);
        }
        orientation();
        window.addEventListener('resize', orientation);
        return () => {
            window.removeEventListener('resize', orientation);
        };
    }, []);
    
    return (
      <div className='w-full h-full bg-slate-500'>
        <iframe
          width={isScreenH ? window.innerHeight : '100%'}
          height={isScreenH ? window.innerWidth : '100%'}
          style={{
                    display: 'block',
                    overflow: 'hidden',
                    transform: isScreenH ? `rotate(270deg) translateY(-${window.innerHeight}px)` : 'rotate(0deg)',
                    transformOrigin: 'top right',
                    border: 0,
                }}
          title='manhua'
          name='manhua'
          src='https://hxmh01.com/'
        />
      </div>
    );
}

export default Demo;
